<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>长征路线</title>
		<link rel="stylesheet" href="/static/vonder/bootstrap-3.3.7-dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="/static/vonder/bootstrap-table/bootstrap-table.min.css">
		<link rel="stylesheet" href="/static/vonder/layui/css/layui.css">
		<link rel="stylesheet" href="/static/fonts/iconfont.css" media="all">
		<link rel="stylesheet" href="/static/vonder/font_et10qcbbi0a/font_et10qcbbi0a/iconfont.css" media="all">
		<link href="/static/vonder/select2/select2.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="/static/css/common.css" />
		<link rel="stylesheet" href="/static/css/table.css">
		<link rel="stylesheet" href="/static/css/model.css" />
		<script src="/static/vonder/jquery-1.10.2/jquery-1.10.2.min.js"></script>
		<script src="/static/vonder/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<script src='/static/vonder/layui/layui.all.js'></script>
		<script src="/static/vonder/bootstrap-table/bootstrap-table.min.js"></script>
		<script src="/static/vonder/select2/select2.min.js"></script>
		<script type="text/javascript" src="/static/js/common.js"></script>
		<script src="/static/js/jquery.slimscroll.min.js"></script>
		<script src="/static/js/left-side-menu.js"></script>
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=36902e9f0d697216853f3d9aab302593"></script>
		<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
		<!-- UI组件库 1.0 -->
		<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
	</head>
	<style>
		#container{
		        width: 100%;
		        height: auto;
		    }
			.amap-logo{
				opacity: 0;
			}
			.amap-copyright{
				opacity: 0;
			}
	</style>
	<body>
		<div class="wrapper">
			<div class="content">
				<!--左侧开始-->
				<div class="contentleft">
					<!-- 系统标题开始 -->
					<div class="systemtitle">长征营站用户后台管理平台</div>
					<!-- 系统标题结束 -->
					<div class="leftmain">
						<!-- logo开始 -->
						<div class="logobox">
							<img src="/static/images/header/logo.png" alt="" class="logoicon">
							<div class="searchbox">
								<input type="text" placeholder="搜索菜单" class="search">
								<img src="/static/images/header/searchs.png" alt="" class="searchicon">
							</div>
						</div>
						<!-- logo结束 -->
						<!-- 左侧导航栏开始 -->
						<div class="leftnavbox">
							<div class="lsm-container">
								<div class="lsm-scroll">
									<div class="lsm-sidebar">
										<ul>
											<li class="lsm-sidebar-item">
												<a href="../datacenter/datacenter.html"><i class="iconfont icon-shujuguanli"></i><span>数据统计</span></a>
											</li>
											<li class="lsm-sidebar-item">
												<a href="javascript:;"><i class="iconfont icon-peizhiguanli"></i><span>首页功能配置</span><i class="my-icon lsm-sidebar-more"></i></a>
												<ul>
													<li><a href="../indexconfigur/setbanner.html"><span>banner设置</span></a></li>
												</ul>
											</li>
											<li class="lsm-sidebar-item active">
												<a href="javascript:;"><i class="iconfont icon-message_5"></i><span>我要出征</span><i class="my-icon lsm-sidebar-more"></i></a>
												<ul>
													<li><a href="gowar.html"><span>出征列表</span></a></li>
													<li><a href="storyPage.html"><span>长征故事</span></a></li>
													<li><a href="Shortline.html"><span>短程路线</span></a></li>
													<!-- <li><a href="../gowar/route.html" class="active"><span>长征路线</span></a></li> -->
												</ul>
											</li>
											<li class="lsm-sidebar-item">
												<a href="javascript:;"><i class="iconfont icon-shuiguo"></i><span>农副产品</span><i class="my-icon lsm-sidebar-more"></i></a>
												<ul>
													<li><a href="../farmproducts/product_list.html"><span>商品列表</span></a></li>
													<li><a href="javascript:;"><span>分类</span></a></li>
													<li><a href="../farmproducts/farmadvert.html"><span>农产品广告</span></a></li>
												</ul>
											</li>
											<li class="lsm-sidebar-item">
												<a href="javascript:;"><i class="iconfont icon-xuexiao"></i><span>长征大学</span><i class="my-icon lsm-sidebar-more"></i></a>
												<ul>
													<li><a href="../university/UniversityAdvert.html"><span>长征大学广告</span></a></li>
													<li><a href="../university/starmentor.html"><span>明星导师</span></a></li>
													<li>
													    <a href="javascript:;"><span>大学商城</span><i class="my-icon lsm-sidebar-more"></i></a>
													    <ul class="three">
													        <li><a href="../university/mall/product_list.html"><span>商品列表</span></a></li>
													        <li><a href="javascript:;"><span>分类</span></a></li>
													        <li><a href="../university/mall/farmadvert.html"><span>商品广告</span></a></li>
													    </ul>
													</li>
													<li><a href="../university/offlineschool.html"><span>线下学校</span></a></li>
												</ul>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
						<!-- 左侧导航栏结束 -->
					</div>
				</div>
				<!-- 左侧结束 -->
				<!--右侧开始-->
				<div class="contentright">
					<div class="rightbox">
						<!-- 右侧头部导航开始 -->
						<div class="navtopbox">
							<div class="navtop">
								<img src="/static/images/header/user.png" alt="" class="usericon">Admin
							</div>
						</div>
						<!-- 右侧头部导航结束 -->
						<!-- 主体开始 -->
						<div class="structure">
							<div class="mainbox">
								<div class="structext">长征路线</div>
								<div class="audit bg" style="padding: 0;">
									<div id="container"></div>
								</div>
							</div>
						</div>
						<!-- 主体结束 -->
					</div>
				</div>
				<!-- 右侧结束 -->
			</div>

			<!-- 退出二次确认模态框开始 -->
			<div class="modal fade" id="del" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog" style="width: 465px;">
					<div class="modal-content" style="width: 465px;">
						<div class="modal-header">
							<img src="/static/images/modal/close.png" alt="" class="close" data-dismiss="modal" aria-hidden="true">
							<h4 class="modal-title" id="myModalLabel">
								提示
							</h4>
						</div>
						<div class="modal-body">
							<div class="prompt">您确定要删除吗？</div>
							<div class="btnboxs" style="padding: 0;text-align: center;">
								<button class="queding" data-dismiss="modal" aria-hidden="true">确定</button>
								<button class="quxiao" data-dismiss="modal" aria-hidden="true">取消</button>
							</div>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>
			<!-- 退出二次确认模态框结束 -->
		</div>
	</body>

</html>
<script type="text/javascript">
	//创建地图
	var map = new AMap.Map('container', {
		zoom: 4
	});
	AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {

		if (!PathSimplifier.supportCanvas) {
			alert('当前环境不支持 Canvas！');
			return;
		}

		//just some colors
		var colors = [
			"#0e90fe" 
		];

		var pathSimplifierIns = new PathSimplifier({
			zIndex: 100,
			//autoSetFitView:false,
			map: map, //所属的地图实例

			getPath: function(pathData, pathIndex) {

				var points = pathData.points,
					lnglatList = [];

				for (var i = 0, len = points.length; i < len; i++) {
					lnglatList.push(points[i].lnglat);
				}

				return lnglatList;
			},
			getHoverTitle: function(pathData, pathIndex, pointIndex) {

				if (pointIndex >= 0) {
					//point 
					return pathData.name + '，' + pathData.points[pointIndex].name;
				}

				return pathData.name + '，点数量' + pathData.points.length;
			},
			renderOptions: {
				pathLineStyle: {
					dirArrowStyle: false
				},
				renderAllPointsIfNumberBelow: 200, //绘制路线节点，如不需要可设置为-1
				getPathStyle: function(pathItem, zoom) {

					var color = colors[pathItem.pathIndex];

					return {
						pathLineStyle: {      //轨迹线样式
							lineWidth: 3,
							strokeStyle: '#0e90fe',
							borderWidth: 1,
							borderStyle: '#eeeeee',
							dirArrowStyle: false
						},
						pathLineSelectedStyle: {
							radius: 4,
							fillStyle: '#e81818',
							lineWidth: 0,
							strokeStyle: 'none'
						},
						pathNavigatorStyle: {
							radius: 4,
							fillStyle: '#e81818',
							lineWidth: 0,
							strokeStyle: 'none'
						},
						startPointStyle: { //起点
							radius: 10,
							fillStyle: '#e81818',
							lineWidth: 0,
							strokeStyle: 'none'
						},
						endPointStyle: { //终点
							radius: 10,
							fillStyle: '#e81818',
							lineWidth: 0,
							strokeStyle: 'none'
						}

					};
				}
			}
		});

		window.pathSimplifierIns = pathSimplifierIns;
		//设置数据
		pathSimplifierIns.setData([{
			name: '长征路线',
			points: [{
				name: "汝城县",
				lnglat: [113.684727, 25.532816]
			}, {
				name: "宜章县",
				lnglat: [112.948804, 25.400435]
			}, {
				name: "桂阳县",
				lnglat: [112.734176, 25.754167]
			}, {
				name: "道县",
				lnglat: [111.600796, 25.526438]
			}, {
				name: "新宁县",
				lnglat: [110.856623, 26.433418]
			}, {
				name: "儒林镇城步苗族自治县",
				lnglat: [110.32224, 26.390598]
			}, {
				name: "武冈市",
				lnglat: [110.631884, 26.726599]
			}, {
				name: "双江镇通道侗族自治县",
				lnglat: [109.784412, 26.158054]
			}, {
				name: "广西壮族自治区桂林市灌阳县",
				lnglat: [111.160723, 25.48947]
			}, {
				name: "广西壮族自治区桂林市兴安县",
				lnglat: [110.67167, 25.611705]
			}, {
				name: "广西壮族自治区桂林市全州县",
				lnglat: [111.072926, 25.928617]
			}, {
				name: "广西壮族自治区桂林市资源县",
				lnglat: [110.6527, 26.042443]
			}, {
				name: "广西壮族自治区桂林市龙胜各族自治县",
				lnglat: [110.011238, 25.797931]
			}, {
				name: "贵州省黔东南苗族侗族自治州黎平县",
				lnglat: [109.136658, 26.230424]
			}, {
				name: "贵州省遵义市余庆县",
				lnglat: [107.905278, 27.21542]
			}, {
				name: "贵州省遵义市播州区枫香镇苟坝",
				lnglat: [106.573321, 27.641305]
			}, {
				name: "贵州省遵义市汇川区板桥镇娄山关景区",
				lnglat: [106.863273, 27.996763]
			}, {
				name: "贵州省遵义市习水县",
				lnglat: [106.197138, 28.33127]
			}, {
				name: "云南省昭通市威信县",
				lnglat: [105.049027, 27.846901]
			}, {
				name: "云南省昆明市东川区",
				lnglat: [103.187825, 26.082873]
			}, {
				name: "云南省昆明市禄劝彝族苗族自治县屏山街道禄劝彝族苗族自治县禄劝县",
				lnglat: [102.471891, 25.551581]
			}, {
				name: "云南省昆明市禄劝彝族苗族自治县屏山街道云南新兴职业技术学院(禄劝校区)",
				lnglat: [102.503288, 25.511697]
			}]
		}]);
		// //选中路线0
		pathSimplifierIns.on('pointClick', function(e, info) {
			console.log('Click: ' + info.pathData.points[info.pointIndex].name);
			window.location.href = "Introduction.html";
		});

	});
</script>
